import _extends from "@babel/runtime/helpers/esm/extends";
import {createNamespace} from '../utils';
import {pickerProps} from '../picker/shared';
import Picker from '../picker';

var _createNamespace = createNamespace('area'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

var PLACEHOLDER_CODE = '000000';

function isOverseaCode(code) {
    return code[0] === '9';
}

export default createComponent({
    props: _extends({}, pickerProps, {
        value: String,
        areaList: {
            type: Object,
            default: function _default() {
                return {};
            }
        },
        columnsNum: {
            type: [Number, String],
            default: 3
        },
        isOverseaCode: {
            type: Function,
            default: isOverseaCode
        },
        columnsPlaceholder: {
            type: Array,
            default: function _default() {
                return [];
            }
        }
    }),
    data: function data() {
        return {
            code: this.value,
            columns: [{
                values: []
            }, {
                values: []
            }, {
                values: []
            }]
        };
    },
    computed: {
        province: function province() {
            return this.areaList.province_list || {};
        },
        city: function city() {
            return this.areaList.city_list || {};
        },
        county: function county() {
            return this.areaList.county_list || {};
        },
        displayColumns: function displayColumns() {
            return this.columns.slice(0, +this.columnsNum);
        },
        placeholderMap: function placeholderMap() {
            return {
                province: this.columnsPlaceholder[0] || '',
                city: this.columnsPlaceholder[1] || '',
                county: this.columnsPlaceholder[2] || ''
            };
        }
    },
    watch: {
        value: function value() {
            this.code = this.value;
            this.setValues();
        },
        areaList: {
            deep: true,
            handler: 'setValues'
        },
        columnsNum: function columnsNum() {
            var _this = this;

            this.$nextTick(function () {
                _this.setValues();
            });
        }
    },
    mounted: function mounted() {
        this.setValues();
    },
    methods: {
        // get list by code
        getList: function getList(type, code) {
            var result = [];

            if (type !== 'province' && !code) {
                return result;
            }

            var list = this[type];
            result = Object.keys(list).map(function (listCode) {
                return {
                    code: listCode,
                    name: list[listCode]
                };
            });

            if (code) {
                // oversea code
                if (this.isOverseaCode(code) && type === 'city') {
                    code = '9';
                }

                result = result.filter(function (item) {
                    return item.code.indexOf(code) === 0;
                });
            }

            if (this.placeholderMap[type] && result.length) {
                // set columns placeholder
                var codeFill = type === 'province' ? '' : type === 'city' ? PLACEHOLDER_CODE.slice(2, 4) : PLACEHOLDER_CODE.slice(4, 6);
                result.unshift({
                    code: "" + code + codeFill,
                    name: this.placeholderMap[type]
                });
            }

            return result;
        },
        // get index by code
        getIndex: function getIndex(type, code) {
            var compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
            var list = this.getList(type, code.slice(0, compareNum - 2)); // oversea code

            if (this.isOverseaCode(code) && type === 'province') {
                compareNum = 1;
            }

            code = code.slice(0, compareNum);

            for (var i = 0; i < list.length; i++) {
                if (list[i].code.slice(0, compareNum) === code) {
                    return i;
                }
            }

            return 0;
        },
        // parse output columns data
        parseOutputValues: function parseOutputValues(values) {
            var _this2 = this;

            return values.map(function (value, index) {
                // save undefined value
                if (!value) return value;
                value = JSON.parse(JSON.stringify(value));

                if (!value.code || value.name === _this2.columnsPlaceholder[index]) {
                    value.code = '';
                    value.name = '';
                }

                return value;
            });
        },
        onChange: function onChange(picker, values, index) {
            this.code = values[index].code;
            this.setValues();
            var getValues = picker.getValues();
            getValues = this.parseOutputValues(getValues);
            this.$emit('change', picker, getValues, index);
        },
        onConfirm: function onConfirm(values, index) {
            values = this.parseOutputValues(values);
            this.setValues();
            this.$emit('confirm', values, index);
        },
        setValues: function setValues() {
            var code = this.code;

            if (!code) {
                if (this.columnsPlaceholder.length) {
                    code = PLACEHOLDER_CODE;
                } else if (Object.keys(this.county)[0]) {
                    code = Object.keys(this.county)[0];
                } else {
                    code = '';
                }
            }

            var picker = this.$refs.picker;
            var province = this.getList('province');
            var city = this.getList('city', code.slice(0, 2));

            if (!picker) {
                return;
            }

            picker.setColumnValues(0, province);
            picker.setColumnValues(1, city);

            if (city.length && code.slice(2, 4) === '00' && !this.isOverseaCode(code)) {
                code = city[0].code;
            }

            picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
            picker.setIndexes([this.getIndex('province', code), this.getIndex('city', code), this.getIndex('county', code)]);
        },
        getValues: function getValues() {
            var picker = this.$refs.picker;
            var getValues = picker ? picker.getValues().filter(function (value) {
                return !!value;
            }) : [];
            getValues = this.parseOutputValues(getValues);
            return getValues;
        },
        getArea: function getArea() {
            var values = this.getValues();
            var area = {
                code: '',
                country: '',
                province: '',
                city: '',
                county: ''
            };

            if (!values.length) {
                return area;
            }

            var names = values.map(function (item) {
                return item.name;
            });
            var validValues = values.filter(function (value) {
                return !!value.code;
            });
            area.code = validValues.length ? validValues[validValues.length - 1].code : '';

            if (this.isOverseaCode(area.code)) {
                area.country = names[1] || '';
                area.province = names[2] || '';
            } else {
                area.province = names[0] || '';
                area.city = names[1] || '';
                area.county = names[2] || '';
            }

            return area;
        },
        // @exposed-api
        reset: function reset(code) {
            this.code = code || '';
            this.setValues();
        }
    },
    render: function render() {
        var h = arguments[0];

        var on = _extends({}, this.$listeners, {
            change: this.onChange,
            confirm: this.onConfirm
        });

        return h(Picker, {
            "ref": "picker",
            "class": bem(),
            "attrs": {
                "showToolbar": true,
                "valueKey": "name",
                "title": this.title,
                "loading": this.loading,
                "columns": this.displayColumns,
                "itemHeight": this.itemHeight,
                "swipeDuration": this.swipeDuration,
                "visibleItemCount": this.visibleItemCount,
                "cancelButtonText": this.cancelButtonText,
                "confirmButtonText": this.confirmButtonText
            },
            "on": _extends({}, on)
        });
    }
});